<template>
  <Address @getAddress="getAddress"/>
  <order-details @getPrice="getPrice"/>
  <!-- 合计部分 -->
    <div class="total">
        <div class="total-left">
          {{price}}
        </div>
        <div class="total-right" @click="navigatorToPay"  style="background-color: #38CA73;">
            提交订单
        </div>
        <div class="total-right" @click="cancelPay" style="background-color: #fc5531;">
            取消支付
        </div>
    </div>
</template>

<script setup>
import Address from "../components/Address.vue";
import OrderDetails from "../components/OrderDetails.vue";
import router from "../route/route.js";
import {ref} from "vue";
import {createOrdersAPI} from "../api/api.js";
import {getSessionStorage} from "../common.js";
const price = ref(0)
const addressId = ref(null)
const businessId = ref(null)
const getPrice = (e)=>{
    businessId.value = e.businessId
    price.value = e.totalPrice
}
const getAddress = (e)=>{
    addressId.value = e.daId
}


const navigatorToPay = ()=>{
    if (!addressId.value) alert("请选择地址！")
    else {
        const orderData = new FormData()
        orderData.append("orderTotal",price.value)
        orderData.append("daId",addressId.value)
        orderData.append("businessId",businessId.value)
        orderData.append("userPhone",getSessionStorage("user").userPhone)
        createOrdersAPI(getSessionStorage("user").token,orderData).then(res=>{
            //res.data.data返回的是订单编号
            res.data.code === "200"?router.push({path:`/payment/${res.data.data}`}):console.log("创建失败")
        }).catch(e=>console.log(e))

    }

}
const cancelPay = ()=>{
    router.replace({path:'/order'})
}

</script>

<style scoped>
/****************** 订单合计部分 ******************/
.total{
    width: 100%;
    height: 14vw;

    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
}
.total .total-left{
    flex: 2;
    background-color: #505051;
    color: #fff;
    font-size: 4.5vw;
    font-weight: 700;
    user-select: none;

    display: flex;
    justify-content: center;
    align-items: center;
}
.total .total-right{
    flex: 1;
    color: #fff;
    font-size: 4.5vw;
    font-weight: 700;
    user-select: none;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}
</style>